<template>
    <div>
      <!--只有一些css样式引用-->
      <lab_head />
      <!--页头部导航-->
      <lab_header />
      <div class="total_count">
        全部商品<em>{{ total_count }}</em
        >件
      </div>
      <ul class="cart_list_th clearfix">
        <li class="col01">商品名称</li>
        <li class="col03">商品价格</li>
        <li class="col04">数量</li>
        <li class="col05">小计</li>
        <li class="col06">操作</li>
      </ul>
      
      
      <ul class="cart_list_td clearfix" v-for="(sku, index) in cart" :key="index">
        <li class="col01">
         <el-checkbox v-model="sku.flag" @change="(handleCheckedCitiesChange(index,sku.flag))"></el-checkbox>
        </li>
        <li class="col02"><img :src="sku.default_image_url" /></li>
        <li class="col03">{{ sku.name }}</li>
        <li class="col05">{{ sku.price }}元</li>
        <li class="col06">
          <div class="num_add">
            <a @click="on_add(sku.id, 1)" class="add fl">+</a>
            <input
              v-model="sku.number"
              @focus="origin_input = sku.count"
              @blur="on_input(index)"
              type="text"
              class="num_show fl"
            />
            <a @click="on_add(sku.id, 2)" class="minus fl">-</a>
          </div>
        </li>
        <li class="col07">{{ sku.total }}元</li>
        <li class="col08"><a @click="on_delete(index)">删除</a></li>
      </ul>
      
  
      <ul class="settlements">
        <li class="col01">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        </li>
        <li class="col02"></li>
        <li class="col03">
          合计(不含运费)：<span>¥</span><em>{{ tmoney }}</em
          ><br />共计<b>{{ tcount }}</b
          >件商品
        </li>
        <li class="col04"><a href="#" @click="buyadd">去结算</a></li>
      </ul>
      <lab_footer />
    </div>
  </template>
  
  <script>
  import lab_head from "./common/lab_head";
  import lab_header from "./common/lab_header";
  import lab_footer from "./common/lab_footer";
  export default {
    data() {
      return {
        cart: [],
        userid:0,
        tmoney:0,
        tcount:0,
        checkAll: true,
        checkedCities: [],
        isIndeterminate: true,
        order_token:""
      };
    },
    //定义组建标签
    components: {
      lab_head,
      lab_header,
      lab_footer,
    },
    methods:{
      getToken(){
        this.axios.get("order/get_order_token").then((res) => {
          this.order_token = res.data.token
        }).catch((err) => {
          
        });
      },
      buyadd(){
        var userid = localStorage.getItem("userid")
        this.axios.post("order/create_order", {"userid": userid, "order_token": this.order_token}).then((res) => {
          if(res.data.code == 200){
            this.$router.push({"path":"/pay", "query":{"orderno": res.data.orderno}})
          }
        }).catch((err) => {
          
        });
      },
      checkallmes(){
        // 封装全部选中
        var resflag = true
            for(var i=0;i<this.cart.length;i++){
              if(this.cart[i]['flag'] == false){
                resflag = false
              }
            }
            this.checkAll = resflag
            this.isIndeterminate = resflag
      },
       handleCheckAllChange(val) {
        this.isIndeterminate = val
         for(var i=0;i<this.cart.length;i++){
            this.cart[i]['flag'] = val
           }
          //  向接口发起请求
          this.axios.get('order/modifyAllStatus?userid='+this.userid+"&status="+val).then((res) => {
            
          }).catch((err) => {
            
          });
        },
       handleCheckedCitiesChange(index, flag) {
          if(flag == true){
            this.cart[index]['flag'] = true
          }else{
            this.cart[index]['flag'] = false
          }
          this.userid = localStorage.getItem('userid')
          // 接口调整改变状态
          var cid = this.cart[index]['id']
          this.axios.get('order/modifyStatus?userid='+this.userid+"&cid="+cid).then((res) => {
            //遍历cart
          this.checkallmes()
          }).catch((err) => {
            
          });
  
        },
      // 获取加入购物车的数据
      getmycart(){
        this.userid = localStorage.getItem("userid")
        this.axios.get("order/mycart?userid="+this.userid).then((res) => {
          this.cart = res.data.glist
          this.tmoney = res.data.tmoney
          this.tcount = res.data.tcount
          this.checkallmes()
        }).catch((err) => {
          
        });
  
    
      },
       // 加减功能
      on_add(gid, numone){
        this.axios.get('order/buy?userid='+this.userid+"&course_id="+gid+"&type="+numone).then((res) => {
  
          
          // 优化vue
          // 小计 ， 总金额，总件数
          // 变例list
          if(res.data.code ==200){
  
              for(var i=0;i<this.cart.length; i++){
                  if (this.cart[i]['id'] == gid){
                    if(numone == 1){
                    this.tcount = this.tcount + 1
                    this.cart[i]['number'] = parseInt(this.cart[i]['number']) + 1
                    this.tmoney = this.tmoney + this.cart[i]['price']
                    this.cart[i]['total'] = this.cart[i]['total']  + this.cart[i]['price']
                  }else{
                    this.tcount = this.tcount - 1
                    this.tmoney = this.tmoney- this.cart[i]['price']
                    this.cart[i]['total'] = this.cart[i]['total'] - this.cart[i]['price']
                    this.cart[i]['number'] = parseInt(this.cart[i]['number']) -1
                  }
  
                }
          }
  
          }else{
            alert(res.data.mes)
          }
         
        })
      }
    },
    mounted(){
      this.getmycart()
      this.getToken()
    }
  };
  </script>
  
  <style>
  .total_count {
    width: 1200px;
    margin: 0 auto;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
  }
  .total_count em {
    font-size: 16px;
    color: #ff4200;
    margin: 0 5px;
  }
  
  .cart_list_th {
    width: 1198px;
    border: 1px solid #ddd;
    background-color: #f7f7f7;
    margin: 0 auto;
  }
  .cart_list_th li {
    height: 40px;
    line-height: 40px;
    float: left;
    text-align: center;
  }
  .cart_list_th .col01 {
    width: 36%;
  }
  .cart_list_th .col02 {
    width: 6%;
  }
  .cart_list_th .col03 {
    width: 13%;
  }
  .cart_list_th .col04 {
    width: 12%;
  }
  .cart_list_th .col05 {
    width: 15%;
  }
  .cart_list_th .col06 {
    width: 18%;
  }
  
  .cart_list_td {
    width: 1198px;
    border: 1px solid #ddd;
    background-color: #fff9f9;
    margin: 0 auto;
    margin-top: -1px;
  }
  .cart_list_td li {
    height: 120px;
    line-height: 120px;
    float: left;
    text-align: center;
  }
  
  .cart_list_td .col01 {
    width: 4%;
  }
  .cart_list_td .col02 {
    width: 12%;
  }
  .cart_list_td .col03 {
    width: 20%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .cart_list_td .col04 {
    width: 6%;
  }
  .cart_list_td .col05 {
    width: 13%;
  }
  .cart_list_td .col06 {
    width: 12%;
  }
  .cart_list_td .col07 {
    width: 15%;
  }
  .cart_list_td .col08 {
    width: 18%;
  }
  
  .cart_list_td .col02 img {
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
    display: block;
    margin: 10px auto 0;
  }
  .cart_list_td .col03 {
    height: 48px;
    text-align: left;
    line-height: 24px;
    margin-top: 38px;
  }
  .cart_list_td .col03 em {
    color: #999;
  }
  .cart_list_td .col08 a {
    color: #666;
  }
  
  .cart_list_td .col06 .num_add {
    width: 98px;
    height: 28px;
    border: 1px solid #ddd;
    margin: 40px auto 0;
  }
  .cart_list_td .col06 .num_add a {
    width: 29px;
    height: 28px;
    line-height: 28px;
    background-color: #f3f3f3;
    font-size: 14px;
    color: #666;
  }
  .cart_list_td .col06 .num_add input {
    width: 38px;
    height: 28px;
    text-align: center;
    line-height: 30px;
    border: 0px;
    display: block;
    float: left;
    outline: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
  }
  
  .settlements {
    width: 1198px;
    height: 78px;
    border: 1px solid #ddd;
    background-color: #fff4e8;
    margin: -1px auto 0;
  }
  .settlements li {
    line-height: 78px;
    float: left;
  }
  .settlements .col01 {
    width: 4%;
    text-align: center;
  }
  .settlements .col02 {
    width: 12%;
  }
  .settlements .col03 {
    width: 69%;
    height: 48px;
    line-height: 28px;
    text-align: right;
    margin-top: 10px;
  }
  .settlements .col03 span {
    color: #ff0000;
    padding-right: 5px;
  }
  .settlements .col03 em {
    color: #ff3d3d;
    font-size: 22px;
    font-weight: bold;
  }
  .settlements .col03 span {
    color: #ff0000;
  }
  .settlements .col03 b {
    color: #ff0000;
    font-size: 14px;
    padding: 0 5px;
  }
  
  .settlements .col04 {
    width: 14%;
    text-align: center;
    float: right;
  }
  .settlements .col04 a {
    display: block;
    height: 78px;
    background-color: #ff3d3d;
    text-align: center;
    line-height: 78px;
    color: #fff;
    font-size: 24px;
  }
  
  .common_title {
    width: 1200px;
    margin: 20px auto 0;
    font-size: 14px;
  }
  
  .common_list_con {
    width: 1200px;
    border: 1px solid #dddddd;
    border-top: 2px solid #e3101e;
    margin: 10px auto 0;
    background-color: #f7f7f7;
    position: relative;
  }
  
  .common_list_con dl {
    margin: 20px;
  }
  .common_list_con dt {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .common_list_con dd {
    margin-bottom: 10px;
  }
  .common_list_con dd.current {
    font-size: 14px;
    font-weight: bold;
  }
  .common_list_con dd input {
    vertical-align: bottom;
    margin-right: 10px;
  }
  
  .edit_site {
    position: absolute;
    right: 20px;
    top: 30px;
    width: 100px;
    height: 30px;
    background-color: #fe0000;
    text-align: center;
    line-height: 30px;
    color: #fff;
  }
  
  .pay_style_con {
    margin: 20px;
  }
  .pay_style_con input {
    float: left;
    margin: 14px 7px 0 0;
  }
  .pay_style_con label {
    float: left;
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 10px 10px 10px 40px;
    margin-right: 25px;
  }
  
  /* 把标签默认的间距设为0 */
  body,
  ul,
  ol,
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  dl,
  dd,
  select,
  input,
  textarea,
  form {
    margin: 0;
    padding: 0;
  }
  
  /* 让h标签文字大小继承body的文字设置 */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 100%;
    font-weight: normal;
  }
  
  /* 去掉列表默认的图标 */
  ul,
  ol {
    list-style: none;
  }
  
  /* 去掉em默认的斜体 */
  em {
    font-style: normal;
  }
  
  /* 去掉a标签默认的下划线 */
  a {
    text-decoration: none;
  }
  
  /* 去掉加链接时产生的框线 */
  img {
    border: 0;
  }
  
  /* 清除浮动 */
  .clearfix:before,
  .clearfix:after {
    content: "";
    display: table;
  }
  .clearfix:after {
    clear: both;
  }
  .clearfix {
    zoom: 1;
  }
  
  /* 浮动 */
  .fl {
    float: left;
  }
  .fr {
    float: right;
  }
  </style>